<template>
  <div>
    <TopBar title="个人信息" bgc="background: #F3F3F3;"></TopBar>
    <van-cell style="height: 14vh;" to="/user/userInfo">
      <van-col :span="18" style="padding-top: 25px;">头像</van-col>
      <van-col :span="5" style="padding: 15px 5px 0 0; text-align: right;">
        <van-image width="1.3rem" height="1.3rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </van-col>
      <van-col :span="1" style="line-height: 15vh; text-align: right;">
        <van-icon name="arrow" color="#898989" size="16px" />
      </van-col>
    </van-cell>

    <van-cell title="用户名" is-link to="/user/edit/username" :value="userInfo.username" />
    <van-cell title="姓名" is-link to="/user/edit/name" :value="userInfo.name" />
    <van-cell title="学号" is-link to="/user/edit/number" :value="userInfo.number" />
    <van-cell title="电话" is-link to="/user/edit/telephone" :value="userInfo.telephone" />
    <van-cell title="学院" is-link to="/user/edit/college" :value="userInfo.college" />

    <van-cell style="margin-top: 1.5vh;" title="我的地址" is-link />
  </div>
</template>

<script>
import { mapState } from "vuex";
import TopBar from "@/views/component/topBar";
export default {
  components: {
    TopBar
  },
  mounted() {
    this.getUserInfo();
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    getUserInfo() {
      this.$store.dispatch("setUserInfo", this.userInfo.id);
    }
  }
};
</script>

<style scope>
</style>